<template>
	<view>
		<view class="container">
			<view class="header">
				<view class="title">{{ showImageData.name }}</view>
				<view class="brief">{{showImageData.detail}}</view>
			</view>
			<view class="showContent">
				<view class="showInfo">
					<view>{{feed_total}} 篇内容</view>
					<view class="spot">·</view>
					<view>{{ feed_view_count }} 次浏览</view>
				</view>

				<view class="section" v-for="(item,index) in dynamicData " :key="index">
					<view class="userInfo" :data-id="item.user.id">
						<view class="img">
							<image :src=" item.user.avatar.url || item.user.avatar " />
						</view>
						<view class="name">{{ item.user.name }}</view>
					</view>
					<view class="brief" :data-id=" item.id " @click="goDetail">{{ item.feed_content ? item.feed_content : '' }}</view>
					<view class="swiperBox" :data-id=" item.id " @click="goDetail" v-if=" item.images.length ">
						<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" :circular="circular"
						 class="swiperItem" @change="onChange" :data-fid="item.id" :current="activityIndex[item.id]">
							<block v-for="(imgItem,index) in item.images " :key="index">
								<swiper-item>
									<image style="display:block;width:100%;height:100%;margin:0 auto;" :src="imgItem.url" mode="aspectFill" />
								</swiper-item>
							</block>
						</swiper>
						<span class="item-num">{{(activityIndex[item.id] || 0) + 1}}/{{ item.images.length }}</span>
					</view>
					<view class="bottomContent">
						<view class="time">
							<view class="left">{{ item.created_at | timeFormate }} 发布</view>
						</view>
						<view class="set">
							<view class="left" :data-id=" item.id " @click="goDetail">
								<view class="img"  >
									<image mode="widthFix" src="../static/msg.png" />
								</view>
								<view class="num" v-if="item.feed_comment_count>0">{{ item.feed_comment_count }}</view>
							</view>
							<view class="right">
								<view class="img">
									<image mode="widthFix" v-if="!item.has_liked" src="../static/love.png" :data-obj="item" :data-index=" index "
									 @click="giveLike" />
									<image mode="widthFix" v-else src="../static/lover.png" :data-obj=" item " :data-index="index" @click="unLike" />
								</view>
								<view class="num" v-if="item.like_count>0">{{ item.like_count }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="showImgBtn" :data-id=" showImageData.id " @click="goPublish">
			<view class="camera">
				<image src="../static/carm.png" />
			</view>
			<view class="showText">晒图</view>
		</view>
		<!-- 未登录登陆组件 -->
		<login ref="login"></login>
	</view>

	<!-- <popup-login closable="true"></popup-login> -->
	<!-- <wxs module="filter" src="../../../wxs/filter.wxs"></wxs> -->

</template>

<script>
	import {
		$storage
	} from '@/utils'
	// 引入时间格式化函数
	import timeFrom from "../uview-ui/libs/function/timeFrom.js";
	export default {
		data() {
			return {
				remove: false,
				showImageData: [],
				dynamicData: [],
				isLike: false,
				likeNum: 0,
				query: {
					page: 1,
					limit: 15,
					activity_id: 0,
				},
				loaded: false, // 是否已经加载过
				canLoadMore: true, // 是否还能加载更多
				activityIndex: [],
				// indicatorDots: true, //导航点
				circular: true, //衔接滑动
				interval: 5000,
				duration: 1000,
				activity_id: 0,
				feed_total: 0,
				user: {},
				feed_view_count: 0,
			}
		},
		filters: {
			timeFormate(timeDate) {
				let Time = new Date(timeDate);
				let timestemp = Time.getTime();
				let t = timeFrom(timestemp, "yyyy年mm月dd日");
				return t;
			},
		},
		components: {
			// comment
		},
		created: function() {},
		mounted: function() {

		},
		onShow: function() {
			const user = $storage.get("user") || {}
			this.user = user;
			// $event.on('after:boot', this, () => {
			//   this.setData({
			//     navigationHeight: GlobalData.navigationHeight,
			//     access: GlobalData.access,
			//     user: GlobalData.userInfo,
			//   })
			// })
			

		},
		async onLoad(opacity) {
			const id = opacity.id
			this.$u.api.getActivityDetail(id, {}).then(async (res) => {
				// console.log('shaitu', res)
				this.showImageData = res.data;
				this.activity_id = id;
				this.query = {
					...this.query,
					activity_id: id
				}
				await this.fetchActivityFeeds('');
			})
			// @ts-ignore
			await this.$u.api.getActivityNum(id).then((res) => {
				this.feed_view_count = res.feed_view_count
			})
			uni.$on('detailInfoTo', (id) => {
			  const arr = this.dynamicData
			  const num = arr.map((item) => item.id).indexOf(id.id)
			  arr[num].has_liked = !arr[num].has_liked
			  arr[num].like_count = arr[num].has_liked ? arr[num].like_count + 1 : arr[num].like_count-1
			  this.$set(this,'dynamicData',arr)
			})
			
			// this.setData!({
			//   navigationHeight: GlobalData.navigationHeight,
			//   access: GlobalData.access,
			// })
			// if (this.data.remove) {
			//   getNotifications()
			//   this.setData({ remove: false })
			// }
			let _this = this;
			uni.$on('activity:feed:posted',  () => {
			   _this.fetchActivityFeeds('refresh')
			})
			uni.$on('after:login',() => {
				this.$refs.login.close(true);
			  const user = $storage.get("user") || {}
			  _this.user = user
			})
			uni.$on('commentTo', (obj) => {
			  const arr = this.dynamicData
			  const index = arr.map((item) => item.id).indexOf(obj.id)
			  arr[index].feed_comment_count = obj.num
			  this.$set(this,'dynamicData',arr)
			})
		},
		methods: {
			async goPublish(e) {
			    let isLogin = await this.$u.api.checkLogin();
			    if (!isLogin) {
			      return
			    }
				// 数据埋点
				this.$$Rangers.event('post_pic', {
					activity_name: '活动晒图',
				    platform: '小程序',
				})
			    uni.navigateTo({ url: `/pages/share?type=照片&id=${this.showImageData.id}` })
			  },
			/* 获取晒图列表 */
			async fetchActivityFeeds(type = '') {
				const {
					dynamicData,
					loaded,
					canLoadMore,
					query
				} = this
				if (type === '' && !loaded) {
					const {
						data,
						meta: {
							current_page,
							last_page,
							total
						},
					} = await this.$u.api.getActiveFeeds(query)
					this.dynamicData = data;
					this.loaded = true;
					this.canLoadMore = current_page < last_page;
					this.feed_total = total;
				}
				if (type === 'loadMore') {
					if (canLoadMore) {
						query.page += 1
						const {
							data,
							meta: {
								current_page,
								last_page,
								total
							},
						} = await this.$u.api.getActiveFeeds(query)
						this.dynamicData = [...dynamicData, ...data];
						this.canLoadMore = current_page < last_page;
						this.feed_total = total
					} else {
						wx.showToast({
							title: '没有更多了',
							duration: 2000,
						})
					}
				}
				if (type === 'refresh') {
					query.page = 1
					const {
						data,
						meta: {
							current_page,
							last_page,
							total
						},
					} = await this.$u.api.getActiveFeeds(query)
					this.dynamicData = data;
					this.loaded = true;
					this.canLoadMore = current_page < last_page;
					this.feed_total = total
				}
			},
			async onReachBottom() {
				await this.fetchActivityFeeds('loadMore')
			},
			
			giveLike(e) {
				const id = e.currentTarget.dataset.obj.id
				const index = e.currentTarget.dataset.index
				const likeNum = e.currentTarget.dataset.obj.like_count
				this.$set(this.dynamicData[index], 'has_liked', true)
				this.$set(this.dynamicData[index], 'like_count', likeNum + 1)
				this.$u.api.likeFeed(id)
			},
			async onPullDownRefresh() {
				await this.fetchActivityFeeds('refresh')
				wx.stopPullDownRefresh()
			},
			unLike(e) {
				const id = e.currentTarget.dataset.obj.id
				const index = e.currentTarget.dataset.index
				const likeNum = e.currentTarget.dataset.obj.like_count
				this.$set(this.dynamicData[index], 'has_liked', false)
				this.$set(this.dynamicData[index], 'like_count', likeNum - 1)
				this.$u.api.unlikeFeed(id)
			},
			goDetail(e) {
				const id = e.currentTarget.dataset.id
				wx.navigateTo({
					url: `/feed/feed?id=${id}`,
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		background-color: rgba(244, 244, 246, 1);
		height: 100vh;

		.header {
			padding: 0 32rpx 40rpx 32rpx;
			background-color: #ffffff;

			.title {
				font-size: 36rpx;
				color: #001432;
				padding: 32rpx 0 20rpx 0;
				font-weight: 600;
			}

			.brief {
				line-height: 40rpx;
				font-size: 30rpx;
				color: #465564;
			}
		}

		.showContent {
			background-color: #ffffff;
			margin-top: 20rpx;
			padding: 20rpx;

			.showInfo {
				color: #8c96a5;
				font-size: 28rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				border-bottom: 1rpx solid #f6f6f6;
				padding-bottom: 20upx;
				margin-left: 10upx;

				.spot {
					margin: 10rpx;
				}
			}

			.section {
				// padding: 32rpx;
				// background-color: yellow;
				border-bottom: 1rpx solid #f6f6f6;
				margin-bottom: 20rpx;

				.userInfo {
					padding-top: 40rpx;
					display: flex;
					flex-direction: row;
					align-items: center;

					.img {
						width: 56rpx;
						height: 56rpx;
						border-radius: 28rpx;
						overflow: hidden;
						margin-right: 10rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.name {
						color: #666;
						font-size: 24rpx;
						margin-left: 6upx;
					}
				}

				.brief {
					padding: 24rpx 0 0;
					margin-left: 20rpx;
					color: #465564;
					font-size: 30rpx;
					line-height: 52rpx;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 6;
					line-clamp: 6;
					-webkit-box-orient: vertical;
				}

				.swiperBox {
					width: 710rpx;
					height: 710rpx;
					border-radius: 20rpx;
					margin-top: 20rpx;
					background-color: #999999;
					overflow: hidden;
					position: relative;

					.swiperItem {
						width: 710rpx;
						height: 710rpx;
					}

					.item-num {
						z-index: 9;
						position: absolute;
						top: 32rpx;
						right: 32rpx;
						background: rgba(0, 0, 0, 0.5);
						padding: 0 22rpx;
						height: 40rpx;
						line-height: 40rpx;
						border-radius: 10rpx;
						font-size: 28rpx;
						color: rgba(255, 255, 255, 0.75);
					}
				}

				.bottomContent {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;

					.time {
						padding: 20rpx 0 30rpx 20upx;
						display: flex;
						flex-direction: row;
						align-items: center;
						color: #8c96a5;
						font-size: 28upx;

						.right {
							margin-left: 20rpx;
						}
					}

					.set {
						padding: 40rpx 10rpx 30rpx 0;
						display: flex;
						flex-direction: row;
						align-items: center;

						.left {
							// width: 80rpx;
							height: 50rpx;
							display: flex;
							flex-direction: row;
							align-items: center;
							margin-right: 50rpx;
							// background-color: #0046f5;
							position: relative;

							.img {
								width: 32upx;

								// height: 28rpx;
								image {
									width: 100%;
									// height: 100%;
								}
							}

							.num {
								position: absolute;
								bottom: 20rpx;
								left: 40rpx;
								color: #8c96a5;
								font-size: 24rpx;
								height: 36rpx;
							}
						}

						.right {
							// width: 80rpx;
							height: 50rpx;
							margin-right: 30upx;
							display: flex;
							flex-direction: row;
							align-items: center;
							// background-color: #0046f5;
							position: relative;

							.img {
								width: 36upx;
								height: 36upx;
								margin-right: 10upx;
								image {
									width: 36upx;
									height: 36upx;
								}
							}

							.num {
								position: absolute;
								bottom: 20rpx;
								left: 45rpx;
								height: 36rpx;
								color: #8c96a5;
								font-size: 24rpx;
							}
						}
					}
				}
			}
		}
	}

	.showImgBtn {
		width: 220rpx;
		height: 80rpx;
		border-radius: 40rpx;
		background-color: #0046f5;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 40rpx;
		left: 265upx;
		z-index: 9999;
		color: #ffffff;

		.camera {
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}

		.showText {
			margin-left: 8rpx;
		}
	}
</style>
